<template>
  {{ provinceList }}
</template>
  
<script lang="ts" setup>
// 用于单次从数据库查地点并存在/src/api/object/PlaceList.json
import { getPlaceByParentId } from "../../api/places/"

type provinceList = {
  value: number,
  label: string,
  children: cityList[]
}
type cityList = {
  value: number,
  label: string,
  children: districtList[]
}
type districtList = {
  value: number,
  label: string,
}
const provinceList: provinceList[] = reactive([])
const province = getPlaceByParentId({ parentId: 1 })
province.then((province) => {
  if (province.code === 200) {
    for (let i: number = 0; i < province.data.length; i++) {
      const cityList: cityList[] = reactive([]);

      const city = getPlaceByParentId({ parentId: province.data[i].id })
      city.then((city) => {
        if (city.code === 200) {
          for (let i: number = 0; i < city.data.length; i++) {
            const districtList: districtList[] = reactive([]);

            const district = getPlaceByParentId({ parentId: city.data[i].id })
            district.then((district) => {
              if (district.code === 200) {
                for (let i: number = 0; i < district.data.length; i++) {
                  districtList.push({
                    value: district.data[i]?.id,
                    label: district.data[i]?.cname
                  })
                }
              }
            })
            cityList.push({
              value: city.data[i]?.id,
              label: city.data[i]?.cname,
              children: districtList
            })
          }
        }
      })
      provinceList.push(
        {
          value: province.data[i]?.id,
          label: province.data[i]?.cname,
          children: cityList
        }
      )
    }
  }
})
</script>
  
<style scoped></style>
  